<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="container1">
    <el-card class="mb-6">
      <span class="text-lg font-medium mb-3">模块简介：</span>
      <span class="text-gray-600 leading-relaxed mt-8">
        为方便台风数据查询、使用与预报结果检验，将以上数据进行文档目录编排，对于大数据进行数据查询、调用、解析程序编制和文档管理；对于小数据进行数据库建设；生成多源数据库系统，方便数据使用。形成新的数据格式、预报时段、覆盖范围等规则，创建专用数据库，以构建适配海面风场预报的数据文件体系。
      </span>
    </el-card>

    <el-card class="h-full">
      <el-tabs v-model="activeTab" style="flex: 1">
        <el-tab-pane
          label="分析报告"
          name="chart"
          class="flex-1 flex flex-col h-full"
          style="height: 80vh"
        >
          <div class="flex-1 flex flex-col h-full">
            <div class="flex items-center justify-between mb-6">
              <div class="flex items-center space-x-6">
                <div class="flex items-center space-x-2">
                  <span class="text-gray-600">大数据：</span>
                  <el-select v-model="selectedType" size="small" class="w-250">
                    <el-option
                      v-for="source in typeOptions"
                      :key="source"
                      :label="source"
                      :value="source"
                    />
                  </el-select>
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-gray-600">小数据：</span>
                  <el-select v-model="selectedAType" size="small">
                    <el-option
                      v-for="type in typeAOptions"
                      :key="type"
                      :label="type"
                      :value="type"
                    />
                  </el-select>
                </div>
              </div>
              <div class="flex items-center space-x-4">
                <el-button type="primary" @click="handleSearch" size="small">
                  <i class="el-icon-search"></i>查询
                </el-button>
                <el-button @click="handleReset" size="small">
                  <i class="el-icon-refresh"></i>重置
                </el-button>
              </div>
            </div>
            <div class="flex h-full flex-1">
              <div class="flex flex-1" v-if="!pdfLoadError">
                <div class="w-180 overflow-y-auto pr-2 border-r">
                  <div
                    v-for="page in numPages"
                    :key="page"
                    class="mb-2 cursor-pointer hover:bg-gray-100 p-1 rounded"
                    :class="{ 'bg-blue-100': currentPage === page }"
                    @click="currentPage = page"
                  >
                    <pdf
                      :src="proxyPdfUrl"
                      :page="page"
                      class="thumbnail-page"
                      scale="0.5"
                    ></pdf>
                  </div>
                </div>

                <div class="flex-1 flex flex-col ml-4">
                  <div class="pdf-container bg-gray-100 overflow-auto">
                    <pdf
                      :src="proxyPdfUrl"
                      class="pdf-viewer"
                      :page="currentPage"
                      @num-pages="numPages = $event"
                      @error="handlePdfError"
                      scale="0.5"
                    ></pdf>
                  </div>

                  <div
                    class="mt-4 flex items-center justify-center space-x-6 py-2 bg-gray-50"
                  >
                    <el-button
                      size="small"
                      :disabled="currentPage <= 1"
                      @click="currentPage--"
                    >
                      上一页
                    </el-button>

                    <span class="text-sm text-gray-600">
                      第 {{ currentPage }} 页 / 共 {{ numPages }} 页
                    </span>

                    <el-button
                      size="small"
                      :disabled="currentPage >= numPages"
                      @click="currentPage++"
                    >
                      下一页
                    </el-button>
                  </div>
                </div>
              </div>
              <div
                v-else
                class="flex flex-1 flex-col items-center justify-center space-y-4"
              >
                <img
                  src="@/assets/images/PDF.png"
                  class="w-132 h-132 opacity-50"
                  alt="加载失败"
                />
                <div class="text-gray-500 text-center">
                  <p class="font-medium">暂无文档预览</p>
                  <el-button type="text" class="mt-2" @click="reloadPdf">
                    重新加载
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据查看" name="download" class="flex-1">
          <div class="overflow-y-auto pr-2" style="height: 75vh">
            <iframe
              src="https://datastore.iocean.cn/era5_reanalysis/wind/"
              class="w-full h-full border-none rounded-lg bg-gray-50"
              title="ERA5数据文件目录"
              loading="lazy"
            ></iframe>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      total: 50,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      activeTab: "chart",
      downloadStatus: "stopped",
      previewImage:
        "https://psl.noaa.gov/data/gridded/images/small/nceprean.png",
      selectedTime: "00",
      selectedType: "风速风向",
      selectedAType: "数据调用",
      selectedDate: new Date(),

      typeAOptions: ["数据格式", "预报时段", "覆盖范围"],
      typeOptions: ["数据查询", "数据调用", "数据解析", "文档管理"],
      pdfUrl: "https://www.gov.cn/zhengce/pdfFile/2023_PDF.pdf",
      proxyPdfUrl: "/pdf/zhengce/pdfFile/2023_PDF.pdf",
      currentPage: 1, // 新增当前页码
      numPages: 0, // 新增总页数
      pdfLoadError: false, // 新增加载错误状态
    };
  },
  methods: {
    toggleDownload() {
      this.downloadStatus =
        this.downloadStatus === "running" ? "stopped" : "running";
    },
    handleSearch() {
      console.log("Search clicked");
    },
    handleReset() {
      this.selectedTime = "00";
      this.selectedType = "风速风向";
      this.selectedSource = "ERA5";
      this.selectedDate = new Date();
    },
    handlePdfError(err) {
      console.error("PDF加载失败:", err);
      this.pdfLoadError = true;
      this.$message.error("PDF加载失败，请检查文件路径或网络连接");
    },
    reloadPdf() {
      this.pdfLoadError = false;
      // 强制重新加载PDF（根据实际需要可选）
      this.proxyPdfUrl = Object.assign({}, this.proxyPdfUrl);
    },
  },
};
</script>

<style scoped>
.container1 {
  height: calc(100vh - 70px);
}

.pdf-viewer {
  position: absolute;
  top: 10px;
  bottom: 10px;

  transform: translate(50%, 0);
  width: 50%;
  height: 100%;
}

/* 新增样式，确保底部控件不会被挤出 */
.el-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 调整 PDF 容器的最大高度，给底部控件留出空间 */
.pdf-container {
  max-height: calc(
    100% - 120px
  ); /* 50px 是底部控件的大致高度，可根据实际情况调整 */
}
</style>
